<template>
  <el-dialog
      title="船舶详细信息"
      :visible="visible"
      class="ship-info-check-dlg"
      :before-close="handleClosedlg"
    >
      <div class="dlg-content-wraper" style="padding: 0px 10px">
        <el-form
          class="my-el-form"
          ref="ruleFormRef"
          :model="formData"
          label-width="0px"
        >
<!--  zyz 2023-4-20 20:10:00  图标显示 只显示信用等级(后期会提供字段)(1个), 和支持的定位方式(可能多个) ,定位方式暂时写死, 取消ETC, 和注销状态-->
          <div class="ship-info-title">
            <span class="ship-cmch-span">{{formData.cmch}}</span>
            <div class="icons-area">
<!--              按信用登记 显示AA A B C D-->
              <img v-if="formData.xydj =='AA'" class="credit-img"  :src="AApng" title="信誉等级AA">
              <img v-else-if="formData.xydj =='A'" class="credit-img"  :src="Apng" title="信誉等级A">
              <img v-else-if="formData.xydj =='B'" class="credit-img"  :src="Bpng" title="信誉等级B">
              <img v-else-if="formData.xydj =='C'" class="credit-img"  :src="Cpng" title="信誉等级C">
              <img v-else-if="formData.xydj =='D'" class="credit-img"  :src="Dpng" title="信誉等级D">
              <img :src="GPSpng" title="定位设备类型GPS">
              <img :src="AISpng" title="定位设备类型AIS">
              <img :src="VITSpng" title="定位设备类型VITS">
            </div>
<!--    注销时  定位不显示   cbzt  船舶状态：1:正常，2:冻结(暂无冻结状态)，3:废弃（注销）-->
            <div class="ship-info-title-right-btns">
              <el-button class="cbdw-guiji" v-if="formData.cbzt !=3" @click="shipPosition"><img :src="ditupng" alt="" width="16" height="16"><span>船舶定位</span></el-button>
              <el-button class="cbdw-guiji" @click="showShipHistory"><img :src="guijipng" alt="" width="16" height="16"><span>过闸记录</span></el-button>
            </div>
          </div>
          <table class="detail-table"
                 :style="{'--my-width1': '50%', '--my-width2': '50%'}">
            <colgroup>
              <col style="width: 33.33%; background-color:#f7f7f7;">
              <col style="width: 33.33%; background-color:#f7f7f7;">
              <col style="width: 33.33%; background-color:#f7f7f7;">
            </colgroup>
            <thead>
            </thead>
            <tbody>
            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">CN号</span>
                    <span class="span-value">
                    <span class="span-value-text">{{ formData.cn }}</span>
                  </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">船检号</span>
                  <span class="span-value">
                  <span class="span-value-text">{{ formData.cjh }}</span>
                </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >船体材料</span>
                  <div class="span-value">
                    <span-for-audit-old-new
                      :old-value="returnCtclLabel(formData.ctcllxid)"
                      :new-value="returnCtclLabel(formData.ctcllxid)"
                    ></span-for-audit-old-new>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >船舶类型</span>
                  <div class="span-value">
                    <span-for-audit-old-new
                      :old-value="returnCblxLabel(formData.cblxid)"
                      :new-value="returnCblxLabel(formData.cblxid)"
                    ></span-for-audit-old-new>
                  </div>
                </div>
              </td>
              <td>
                <!--     :value="formData.cjgid.split(',')" 传入的是 字符串 -->
                <div class="td-item-wrap">
                  <span class="span-label" >船籍港</span>
                  <div class="span-value">
                    <span-for-audit-old-new
                      :old-value="getLabelFromOptionValue('cjg',formData.cjgid)"
                      :new-value="getLabelFromOptionValue('cjg',formData.cjgid)"
                    ></span-for-audit-old-new>
                  </div>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >发证日期</span>
                  <div class="span-value">
                    <span-for-audit-old-new
                      :old-value="formData.fzrq | returnDate"
                      :new-value="formData.fzrq | returnDate"
                    ></span-for-audit-old-new>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >建造日期</span>
                  <div class="span-value">
                    <span-for-audit-old-new
                      :old-value="formData.jzrq | returnDate"
                      :new-value="formData.jzrq | returnDate"
                    ></span-for-audit-old-new>
                  </div>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >有效期止</span>
                  <div class="span-value">
                    <span-for-audit-old-new
                      :old-value="formData.yxqz | returnDate"
                      :new-value="formData.yxqz | returnDate"
                    ></span-for-audit-old-new>
                  </div>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >注册地</span>
                  <div class="span-value">
                    <span-for-audit-old-new
                      :old-value="getLabelFromOptionValue('zcd',formData.zcd)"
                      :new-value="getLabelFromOptionValue('zcd',formData.zcd)"
                    ></span-for-audit-old-new>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >船主姓名</span>
                  <span class="span-value">
                  <span-for-audit-old-new
                    :old-value="formData.czxm"
                    :new-value="formData.czxm"
                  ></span-for-audit-old-new>
                </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >船主证件类型</span>
                  <div class="span-value">
                    <span-for-audit-old-new
                      :old-value="formData.sfzjlxid ==0? '身份证' : '组织机构代码' "
                      :new-value="formData.sfzjlxid ==0? '身份证':'组织机构代码' "
                    ></span-for-audit-old-new>
                  </div>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >证件号码</span>
                  <span class="span-value zjhm-width">
                    <span-for-audit-old-new
                      :old-value="formData.sfzjhm"
                      :new-value="formData.sfzjhm"
                    ></span-for-audit-old-new>
                  </span>
                </div>
              </td>
            </tr>
            <tr>
              <td>
              <div class="td-item-wrap">
                <span class="span-label">船主手机</span>
                <span class="span-value">
                    <span-for-audit-old-new
                    :old-value="formData.czhusj"
                    :new-value="formData.czhusj"
                  ></span-for-audit-old-new>
                </span>
              </div>
            </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >随船电话</span>
                  <span class="span-value">
                    <span-for-audit-old-new
                      :old-value="formData.scdh"
                      :new-value="formData.scdh"
                    ></span-for-audit-old-new>
                  </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label"></span>
                  <span class="span-value"></span>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label">MMSI</span>
                  <span class="span-value">
                    <span-for-audit-old-new
                    :old-value="formData.mmsi"
                    :new-value="formData.mmsi"
                   ></span-for-audit-old-new>
                  </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label" >APP使用状态</span>
                  <span class="span-value">
                   <span-for-audit-old-new
                    :old-value="'正常'"
                    :new-value="'正常'"
                   ></span-for-audit-old-new>
                 </span>
                </div>
              </td>
              <td>
                <div class="td-item-wrap">
                  <span class="span-label"></span>
                  <span class="span-value"></span>
                </div>
              </td>
            </tr>
            </tbody>
          </table>

          <table class="detail-table other-info-table">
          <colgroup>
            <col style="width: 33.3%; background-color:#f7f7f7;">
            <col style="width: 33.3%; background-color:#f7f7f7;">
            <col style="width: 33.3%; background-color:#f7f7f7;">
          </colgroup>
          <thead>
          </thead>
          <tbody>
          <tr>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >总吨</span>
                <span class="span-value span-w50">
                   <span-for-audit-old-new
                     :old-value="formData.zd"
                     :new-value="formData.zd"
                   ></span-for-audit-old-new>
                  </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >计费基数</span>
                <span class="span-value span-w50">
                  <span-for-audit-old-new
                    :old-value="formData.jfjs"
                    :new-value="formData.jfjs"
                  ></span-for-audit-old-new>
                </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >船舶高度(米)</span>
                <span class="span-value span-w50">
                <span-for-audit-old-new
                  :old-value="formData.cbgd"
                  :new-value="formData.cbgd"
                ></span-for-audit-old-new>
              </span>
              </div>
            </td>
          </tr>

          <tr>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >船长(米)</span>
                <span class="span-value span-w50">
                 <span-for-audit-old-new
                      :old-value="formData.cbcd"
                      :new-value="formData.cbcd"
                    ></span-for-audit-old-new>
              </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >船宽(米)</span>
                <span class="span-value span-w50">
                <span-for-audit-old-new
                  :old-value="formData.cbkd"
                  :new-value="formData.cbkd"
                ></span-for-audit-old-new>
              </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >型深(米)</span>
                <span class="span-value span-w50">
                <span-for-audit-old-new
                  :old-value="formData.cbxs"
                  :new-value="formData.cbxs"
                ></span-for-audit-old-new>
              </span>
              </div>
            </td>

          </tr>
          <tr>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >最大船长(米)</span>
                <span class="span-value span-w50">
                <span-for-audit-old-new
                 :old-value="formData.zdcc"
                 :new-value="formData.zdcc"
               ></span-for-audit-old-new>
              </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >最大船宽(米)</span>
                <span class="span-value span-w50">
                  <span-for-audit-old-new
                    :old-value="formData.zdck"
                    :new-value="formData.zdck"
                  ></span-for-audit-old-new>
              </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >最大型深(米)</span>
                <span class="span-value span-w50">
                 <span-for-audit-old-new
                   :old-value="formData.zdxs"
                   :new-value="formData.zdxs"
                 ></span-for-audit-old-new>
              </span>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50">A航区准载吨位(吨)</span>
                <span class="span-value span-w50">
                 <span-for-audit-old-new
                   :old-value="formData.ahqzzd"
                   :new-value="formData.ahqzzd"
                 ></span-for-audit-old-new>
              </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >B航区准载吨位(吨)</span>
                <span class="span-value span-w50">
                <span-for-audit-old-new
                  :old-value="formData.bhqzzd"
                  :new-value="formData.bhqzzd"
                ></span-for-audit-old-new>
              </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >C航区准载吨位(吨)</span>
                <span class="span-value span-w50">
                <span-for-audit-old-new
                  :old-value="formData.chqzzd"
                  :new-value="formData.chqzzd"
                ></span-for-audit-old-new>
              </span>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50">A航区干舷(毫米)</span>
                <span class="span-value span-w50">
                 <span-for-audit-old-new
                   :old-value="formData.ahqgx"
                   :new-value="formData.ahqgx"
                 ></span-for-audit-old-new>
              </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50">B航区干舷(毫米)</span>
                <span class="span-value span-w50">
                <span-for-audit-old-new
                  :old-value="formData.bhqgx"
                  :new-value="formData.bhqgx"
                ></span-for-audit-old-new>
              </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >C航区干舷(毫米)</span>
                <span class="span-value span-w50">
                <span-for-audit-old-new
                  :old-value="formData.chqgx"
                  :new-value="formData.chqgx"
                ></span-for-audit-old-new>
              </span>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" >主机功率(千瓦)</span>
                <span class="span-value span-w50">
                  <span-for-audit-old-new
                    :old-value="formData.zjgl"
                    :new-value="formData.zjgl"
                  ></span-for-audit-old-new>
                </span>
              </div>
            </td><td>
              <div class="td-item-wrap">
                <span class="span-label span-w50">准载吨位(吨)</span>
                <span class="span-value span-w50">
                  <span-for-audit-old-new
                    :old-value="formData.zzd"
                    :new-value="formData.zzd"
                  ></span-for-audit-old-new>
                </span>
              </div>
            </td>
            <td>
              <div class="td-item-wrap">
                <span class="span-label span-w50" ></span>
                <span class="span-value span-w50"></span>
              </div>
            </td>

          </tr>
          </tbody>
        </table>

          <table class="detail-table">
            <colgroup>
              <col style="width: 33.3%; background-color:#f7f7f7;">
              <col style="width: 33.3%; background-color:#f7f7f7;">
              <col style="width: 33.3%; background-color:#f7f7f7;">
            </colgroup>
            <thead>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label span-w50" >首录船闸所</span>
                    <span class="span-value span-w50">
                      <span-for-audit-old-new
                        :old-value="formData.slczs"
                        :new-value="formData.slczs"
                      ></span-for-audit-old-new>
                    </span>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label span-w50" >首录人</span>
                    <span class="span-value span-w50">
                      <span-for-audit-old-new
                        :old-value="formData.slr"
                        :new-value="formData.slr"
                      ></span-for-audit-old-new>
                    </span>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label span-w50" >首录时间</span>
                    <span class="span-value span-w50">
                      <span-for-audit-old-new
                        :old-value="parseTime(formData.slsj)"
                        :new-value="parseTime(formData.slsj)"
                      ></span-for-audit-old-new>
                    </span>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label span-w50" >复核船闸所</span>
                    <span class="span-value span-w50">
                      <span-for-audit-old-new
                        :old-value="formData.fhczs"
                        :new-value="formData.fhczs"
                      ></span-for-audit-old-new>
                    </span>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label span-w50" >变更人</span>
                    <span class="span-value span-w50">
                      <span-for-audit-old-new
                        :old-value="formData.bgr"
                        :new-value="formData.bgr"
                      ></span-for-audit-old-new>
                    </span>
                  </div>
                </td>
                <td>
                  <div class="td-item-wrap">
                    <span class="span-label span-w50" >变更时间</span>
                    <span class="span-value span-w50">
                      <span-for-audit-old-new
                        :old-value="parseTime(formData.bgsj)"
                        :new-value="parseTime(formData.bgsj)"
                      ></span-for-audit-old-new>
                    </span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

          <div class="pics-upload-area">
            <div class="pics-label" >上传图片</div>
            <div class="pics-area">
              <div class="img-item" v-if="formData.cjzsfjurl">
                <div class="img-wrap" >
                  <el-image
                    :src="formData.cjzsfjurl"
                    :initial-index="0"
                    fit="fill"
                  >
                    <div slot="placeholder" class="imageslot">
                      <i class="el-icon-loading" style="font-size: 30px; color: #909399" ></i>
                    </div>

                  </el-image>
                  <div class="img-mask">
                    <i class="el-icon-zoom-in" style="cursor:pointer; " @click="handlePictureCardPreview({url: formData.cjzsfjurl})" ></i>
                  </div>
                </div>
                <div class="img-text">船检证书</div>
              </div>
              <div class="img-item" v-if="formData.cbzmfjurl">
                <div class="img-wrap" >
                  <el-image
                    :src="formData.cbzmfjurl"
                    :initial-index="0"
                    fit="fill"
                  >
                    <div slot="placeholder" class="imageslot">
                      <i class="el-icon-loading" style="font-size: 30px; color: #909399" ></i>
                    </div>

                  </el-image>
                  <div class="img-mask">
                    <i class="el-icon-zoom-in" style="cursor:pointer; " @click="handlePictureCardPreview({url: formData.cbzmfjurl})" ></i>
                  </div>
                </div>
                <div class="img-text">船舶正面照</div>

              </div>
              <div class="img-item" v-if="formData.cbcmfjurl">
                <div class="img-wrap" >
                  <el-image
                    :src="formData.cbcmfjurl"
                    :initial-index="0"
                    fit="fill"
                  >
                    <div slot="placeholder" class="imageslot">
                      <i class="el-icon-loading" style="font-size: 30px; color: #909399" ></i>
                    </div>

                  </el-image>
                  <div class="img-mask">
                    <i class="el-icon-zoom-in" style="cursor:pointer;" @click="handlePictureCardPreview({url: formData.cbcmfjurl})" ></i>
                  </div>
                </div>
                <div class="img-text">船舶侧面照</div>

              </div>
              <template v-if="formData.qtfjurl">
                <div class="img-item" v-for="(url,index) in formData.qtfjurl.split('|')" :key="index">
                  <div class="img-wrap" v-if="url">
                    <el-image
                      :src="url"
                      fit="fill"
                    >
                      <div slot="placeholder" class="imageslot">
                        <i class="el-icon-loading" style="font-size: 30px; color: #909399" ></i>
                      </div>

                    </el-image>
                    <div class="img-mask">
                      <i class="el-icon-zoom-in" style="cursor: pointer" @click="handlePictureCardPreview({url})"></i>
                    </div>
                  </div>
                  <div class="img-text">其他附件图{{ index + 1 }}</div>
                </div>
              </template>
            </div>
            <!--   img preview mask -->
            <div  class="img-preview-my-mask" v-if="maskVisibleForPreviewImg" @click.stop="maskVisibleForPreviewImg=false;">
              <div class="img-preview-wrap">
<!--                @click="maskVisibleForPreviewImg=false;"-->
                <h3 class="preview-title"><span>图片预览</span><i  style="cursor: pointer"  class="el-icon-close"></i></h3>
                <div class="img-preview-div">
                  <img class="img-preview" :src="previewImgUrl" alt="">
                </div>
              </div>
            </div>
          </div>

        </el-form>
      </div>
      <span slot="footer" class="dlg-footer">
        <my-button @click="closeDlg" type="primary" >关闭</my-button>

      </span>

    </el-dialog>
</template>

<script>
import SpanForAuditOldNew from "@/views/dispatch/shipInfoManagement/shipInfoCheck/SpanForAuditOldNew";
import CascaderArea from "@/components/CascaderArea/cascaderArea";
import {mapGetters} from "vuex";
import {agreeAudit, getUrlByFileId, submitCheckInfoToAudit} from "@/api/dispatch/shipInfoManagement/shipInfoCheck";
import {listByTemplateId, treeByTemplate} from '@/api/sys/dict/data'
import dictionary from "@/utils/dictionary";

import AApng  from '@/assets/img/AA.png'
import Apng  from '@/assets/img/A.png'
import Bpng  from '@/assets/img/B.png'
import Cpng  from '@/assets/img/C.png'
import Dpng  from '@/assets/img/D.png'
import AISpng  from '@/assets/img/AIS.png'
import GPSpng  from '@/assets/img/GPS.png'
import VITSpng  from '@/assets/img/VITS.png'

import ditupng  from '@/assets/img/position.png'
import guijipng  from '@/assets/img/gzjl.png'
import {getAnyShipInfoByCmch} from "@/api/shipRegistrationManagement/singleShip/singleShip";
/**
 *  2023-5-24 改为增加 cbid, 防止注销的船舶再次登记,再按cmch查询报错
 */

/**
 * add yg 2023-4-24
 * 使用说明 只需要传入:
 * visible(是否显示)  :visible.sync 调用
 // * 和 cmch(船名船号)
     和  cbid
 * 请使用 v-if 控制对话框 渲染
 *
 * 使用方法
    <ship-detail-info
       v-if="dialogVisible"
       :visible.sync="dialogVisible"
       // :cmch="cmch"
       :cbid="cbid"
       @closeDialog="closeShipDetail"
    >
    </ship-detail-info>
     对话框里 关闭事件 : 发送消息 由 update:visible 改为了 closeDialog
     所以 : 调用时 必须再接收 关闭对话框事件 (设置flag 为false), 因为 .sync 不好使了?
 * */
export default {
  name: "shipDetailInfo",
  components: {SpanForAuditOldNew},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // cmch:{
    //   type: String,
    //   required:true,
    // },
    cbid:{
      type: String,
      required: true,
    }
  },
  data() {
    return {
      //必须指定字段,否则后加的多个会不响应
      formData:{
        cmch:'',
        cbid:'',
        cbzt:'',
        cn:'',
        cjh:'',
        ctcllxid:'',
        cblxid:'',
        cjgid:'',
        fzrq:'',
        jzrq:'',
        yxqz:'',
        zcd:'',
        czxm:'',
        sfzjlxid:'',
        sfzjhm:'',
        czhusj:'',
        scdh:'',
        mmsi:'',
        zd:'',
        jfjs:'',
        zjgl:'',
        cbcd:'',
        cbkd:'',
        cbxs:'',
        zdcc:'',
        zdck:'',
        zdxs:'',
        ahqzzd:'',
        bhqzzd:'',
        chqzzd:'',
        ahqgx:'',
        bhqgx:'',
        chqgx:'',
        cbgd:'',
        slczs:'',
        slr:'',
        slsj:'',
        fhczs:'',
        bgr:'',
        bgsj:'',
        xydj:'',
        cjzsfjid:'',
        cjzsfjurl:'',
        cbzmfjid:'',
        cbzmfjurl:'',
        cbcmfjid:'',
        cbcmfjurl:'',
        qtfjid:'',
        qtfjurl:'',

      },
      AApng,
      Apng,
      Bpng,
      Cpng,
      Dpng,
      AISpng,
      GPSpng,
      VITSpng,
      ditupng,
      guijipng,
      ctclOptions: [],
      cblxOptions: [],
      cjgOptions: [],
      fzjgOptions: [],
      zcdOptions: [],
      maskVisibleForPreviewImg: false,
      previewImgUrl: null,
    }
  },

  computed: {
    //token 可以直接拿来用
    // ...mapGetters(['token']),
  },
  watch:{
    cbid:{
      handler:function (nv,ov){
          if (nv && nv != ov ){
            //cmcm有效,
            console.log(nv,'>>>cbid')
            this.getShipDetailInfo(nv)
          }
        },
      immediate:true,
    }
  },

  mounted() {
    this.getCtclOptions();
    this.getCblxOptions();
    this.getCjgList();
  },
  created() {
    console.log('shipInfoCheckDialog created')
  },
  destroyed() {
    console.log('shipInfoCheckDialog destroyed')
  },
  filters: {
    returnDate(t) {
      if (!t){
        return ''
      }
      let now = new Date(t)
      let y = now.getFullYear()
      let m = now.getMonth() + 1
      let d = now.getDate()
      return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
    }
  },
  methods: {
    async getShipDetailInfo(nv){
      let vm = this;
      let params = { cbid: nv} //this.cbid
      try {
        let ret = await getAnyShipInfoByCmch(params);
        if (ret && ret.code == 200 ){
          //必须用这种, 因 4个url 都是后加的,
          vm.formData = {
            ...ret.data,
            cjzsfjurl:'',
            cbzmfjurl:'',
            cbcmfjurl:'',
            qtfjurl:'',
          };
          if (vm.formData){
            await vm.getAllUrlsFromFjid();
          }
        }
      }catch (e){
        vm.$message.error('查询船舶详情失败!')
      }

    },

    async showShipHistory(){
      //单独打开新窗口,显示过闸记录方式
      let routerData = this.$router.resolve({
        path:'/showShipHistoryOnly',
        query:{
          // cbid: this.formData.cbid
          cbid:this.cbid
        }
      })
      let screenW = screen.width;
      let screenH = 750; //screen.height;
      let winId = window.open(routerData.href, '_blank',`center=yes,left=0,top=0,width=${screenW},height=${screenH},toolbar=no, menubar=no, scrollbars=no, location=no, status=yes`)
      setTimeout(()=>{
        winId.document.title = '过闸记录'
      }, 1000)
    },
    shipPosition(){
      //单独打开新窗口,显示船舶定位信息
      let routerData = this.$router.resolve({
        path:'/showShipPosition',
        query:{
          // cbid: this.formData.cbid
          cmch:this.formData.cmch || ''
        }
      })
      let screenW = screen.width;
      let screenH = screen.height;
      let winId = window.open(routerData.href, '_blank',`center=yes,left=0,top=0,width=${screenW},height=${screenH},toolbar=no, menubar=no, scrollbars=no, location=no, status=yes`)
      setTimeout(()=>{
        winId.document.title = '船舶定位'
      }, 1000)
    },
    //过滤器 取不到this.
    returnCtclLabel(ctcllxid) {
      /*
      * [
      *   {label, dataId},
      *   {label, dataId},
      * ]
      */
      // console.log(this.ctclOptions)
      //dictDataId
      let f = this.ctclOptions.filter(value => {
        return value.value == ctcllxid
      })
      // console.log(f)
      if (f && f.length > 0) {
        return f[0].label
      }
      return ctcllxid
    },
    returnCblxLabel(cblxid) {
      /*
      * [
      *   {label, dataId},
      *   {label, dataId},
      * ]
      */
      // console.log(this.cblxOptions)
      //dictDataId
      let f = this.cblxOptions.filter(value => {
        return value.value == cblxid
      })
      if (f && f.length > 0) {
        return f[0].label
      }
      return cblxid
    },

    async getAllUrlsFromFjid() {
      let vm = this;
      if (vm.formData.cjzsfjid) {
        let url = await vm.getUrl(vm.formData.cjzsfjid)
        vm.formData.cjzsfjurl = url;
      }
      if (vm.formData.cbzmfjid) {
        let url = await vm.getUrl(vm.formData.cbzmfjid)
        vm.formData.cbzmfjurl = url;
      }
      if (vm.formData.cbcmfjid) {
        let url = await vm.getUrl(vm.formData.cbcmfjid)
        vm.formData.cbcmfjurl = url;
      }
      //其他最多三个:  qtfjid: null, qtfjid: 'id1,id2,id3'
      if (vm.formData.qtfjid) {
        let qtfjidArr = vm.formData.qtfjid.split(',');
        if (qtfjidArr && qtfjidArr.length > 0) {
          let aUrlArr = [];
          for (const fjid of qtfjidArr) {
            if (fjid) {
              let url = await vm.getUrl(fjid)
              aUrlArr.push(url);
            }
          }
          if (aUrlArr.length > 0) {
            vm.formData.qtfjurl = aUrlArr.join('|');
          } else {
            vm.formData.qtfjurl = null;
          }
        }
      }
    },


    handlePictureCardPreview(file) {
      this.previewImgUrl = file.url
      this.maskVisibleForPreviewImg = true
    },

    //船籍港变化时 传值
    getSelectedOptions(val, fieldName) {
      //传入后台 ,逗号分割的字符串
      this.formData.cjgid = val.join(',')
    },
    getSelectedOptionsFzjg(val, fieldName) {
      this.formData.fzjg = val.join(',')
    },
    getSelectedOptionsZcd(val, fieldName) {
      this.formData.zcd = val.join(',')
    },

    async getCtclOptions() {
      this.ctclOptions = await this.initDictOptionsUtil('hullMaterial')
      console.error(this.ctclOptions,'ctclOptions')
    },
    async getCblxOptions() {
      this.cblxOptions = await this.initDictOptionsUtil('shipType')
    },

    //根据value 返回 地区名用于: 船籍港, 发证机构, 注册地
    getLabelFromOptionValue(optionType, searchValue) {
      if (!searchValue )return ;
      let vArr = searchValue.split(',');
      searchValue = vArr[vArr.length - 1];

      let loopOptions;
      if (optionType == 'cjg') {
        loopOptions = this.cjgOptions;
      } else if (optionType == 'fzjg') {
        loopOptions = this.fzjgOptions;
      } else if (optionType == 'zcd') {
        loopOptions = this.zcdOptions;
      }
      return this.doRecursion(loopOptions, searchValue);
    },

    //递归 2023-4-17 修复bug
    doRecursion(loopOptions, searchValue) {
      let ret = '';
      for (const pitem of loopOptions) {
        if (pitem.value == searchValue){
          ret = pitem.label;
          break;
        }else if (pitem.children && pitem.children.length > 0){
          ret = this.doRecursion(pitem.children, searchValue)
          if (ret) break;
        }
      }
      return ret;
    },

    async getCjgList() {
      //树形结构  locationData
      let ret = await treeByTemplate({
        templateId: dictionary.locationData.templateId,
        dictDataField: dictionary.locationData.dictDataField
      })
      console.error(this.cjgOptions, 'cjg, fzjg, zcd')
      this.cjgOptions = ret.data;
      // this.cjgOptions.map((v)=>{
      //   console.error( v.value,' this.cjgOptions----')
      //
      // })
      console.error(this.cjgOptions, ' this.cjgOptions----')

      this.fzjgOptions = [...this.cjgOptions]
      this.zcdOptions = [...this.cjgOptions]


      // console.error('----get by listByTemplateId')
      //返回的不是属性结构了
      // let ret = await listByTemplateId({
      //   templateId: dictionary.locationData.templateId,
      //   dictDataField:dictionary.locationData.dictDataField
      // });
      // console.error(ret)

    },

    handleClosedlg(done) {
      this.$emit('closeDialog')

      // this.$confirm('确认关闭?')
      //   .then(_ => {
      //     done();
      //     this.$emit('update:visible', false)
      //   })
      //   .catch(_ => {
      //   });
    },

    closeDlg() {
      this.$emit('closeDialog')
    },

    /*
* 上传图片返回
* fjid: "3283911329302016"   //3283913364571648
  fjmc: "11111111111111_37b4da53-00c8-4c85-bd8a-3769bb509919.png"
  fjyw: "CBFH"
  scmc: "11111111111111.png"
  url: "http://1.13.171.55:9990/fileclient1/11111111111111_37b4da53-00c8-4c85-bd8a-3769bb509919.png"
* */
    async getUrl(fileId) {
      // let r = await getUrlByFileId('3283913364571648,3283911329302016')
      let r = await getUrlByFileId(fileId)
      if (r.code == 200) {
        return r.data[0]
      }
      return ''
    },
  }
}
</script>

<style scoped>
.ship-info-check-dlg{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.ship-info-check-dlg >>> .el-dialog{
  width:1220px !important;
  margin-top: 0 !important;
  box-sizing: border-box;
}

.ship-info-check-dlg >>> .el-dialog__header {
  /*padding-bottom: 6px !important;*/
  padding: 17px;
}

.ship-info-check-dlg >>> .el-dialog__header > .el-dialog__title {
  font-size: 20px;
}

.ship-info-check-dlg >>> .el-dialog__body {
  padding: 16px !important;
}

.ship-info-check-dlg >>> .el-dialog__close {
  /*font-size: 26px !important;*/
  transform-origin: bottom !important;
  transform: scale(1.5) !important;
}

.ship-info-check-dlg >>> .el-dialog__footer {
  padding-top: 0px !important;
  padding-right: 30px !important;
}

.ship-info-check-dlg >>> .el-dialog__header{
  /*padding: 10px 30px;*/
  padding:17px;
}

.ship-info-title{
  background: #DDE3EB;
  font-size: 18px;
  height: 50px;
  color: black;
  font-family: 'Microsoft YaHei';
  font-weight: bolder;
  padding: 4px 1em;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ship-info-title-right-btns{
  margin-left: auto;
}

.ship-cbdw{
  margin-left: auto;
}
.cbdw-guiji{
  padding: 8px 16px;
  border-radius: 2px;
  margin-left: 14px;
}
.cbdw-guiji>>> span{
  display: flex;
  align-items: center;
}
.cbdw-guiji img{
  margin-right: 12px;
}

.icons-area{
  margin-left: 1em;
  /*background-color: lime;*/
  display: flex;
  align-items: center;
}
.icons-area img{
  height: 22px;
  margin: 0px 4px;
  /*background-color: lime;*/
}
.icons-area .credit-img{
  height: 22px;
  /*background-color: red;*/
}
.icons-area .etc-img{
  width: 40px;
}

.detail-table {
  border-collapse: collapse;
  width: 100%;
  /*font-size: 18px;*/
  margin-bottom: 10px;
}

.detail-table td {
  border: 1px solid #EBEEF5;
  padding: 0px;
  color: black;
}

/*tr:last-child > td:last-child{*/
/*  text-align: center;*/
/*}*/


.span-label {
  display: inline-block;
  background: #F7F8FA;
  width: var(--my-width1);
  text-align: right;
  /*background-color: red;*/
  padding: 6px 8px 6px 0px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(51,51,51,0.7);

}

.span-label.span-w50,
.span-value.span-w50 {
  width: 50%;
}


.span-value {
  display: flex;
  /*width: 68%;*/
  align-items: center;
  width: var(--my-width2);
  height: 100%;
  padding: 2px;
  background-color: #fff;;
}

.span-value-input {
  width: 100%;
  /*height: 100%;*/
  /*border: 1px solid #dfdfdf;*/
  outline: none;
  /*padding: 3px;*/
  font-size: 12px;
}

.span-value-text {
  /*display: inline-block;*/
  padding-left: 6px;
  /*height: 24px;*/
  /*line-height: 24px;*/
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}


.td-item-wrap {
  width: 100%;
  /* add 2023-3-28*/
  /*height: 40px;*/
  height: 30px;

  display: flex;
  align-items: center;
  padding: 0px;
  box-sizing: border-box;
}

.span-value select {
  width: 100%;
  border: 1px solid #dfdfdf;
  outline: none;
  padding: 2px;
}

.el-date-picker {
  border-radius: 22px;
}

/*.span-value  */
.my-date-picker >>> .el-input__inner {
  /*border-radius: 1px !important;*/
}

/*   pic upload*/
.pics-upload-area {
  box-sizing: border-box;
  /*border: 1px solid red;*/
  /* test del*/
  /*height: 100px; !*150px;*!*/
  display: flex;
  background-color: #f7f7f7;
  padding: 1px;
  margin-bottom: 10px;
  align-items: center;
}

.pics-label {
  background-color: #f7f7f7;
  height: 100%;
  width: 167px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px;
  color: black;
}

.pics-area {
  background-color: white;
  flex: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 4px 16px;
}

.pics-area .img-item {
  width: 88px;
  /*del  test*/
  /*height: 100%;*/

  /*box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);*/
  /*background-color: rgba(0,0,0,0.02);*/
  position: relative;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  /*border-radius: 6px;*/
  overflow: hidden;
  /*: 0px 0px 4px 0px;*/
  padding: 0px 0px 0px 0px;
}

.img-item .el-image{
  /*border-radius: 6px;*/
  background-color:rgba(0,0,0,.05);
  width: 100%;
  height: 100%;
}

.img-item >>> .el-image>img{
  transition: all 0.5s;
  /*border-radius: 6px;*/
  background-color:rgba(0,0,0,.05);
  width: 100%;
  height: 100%

}

.img-wrap:hover .img-mask {
  opacity: 1;
}

.img-wrap{
  width: 80px;
  height: 80px;
  position: relative;
  background: #F7F8FA;
  border-radius: 8px;
  padding: 8px;
  /*border-radius: 6px;*/
  overflow: hidden;
}

.img-wrap .img-mask{
  position: absolute;
  /*border-radius: 6px;*/
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  background-color: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: all .3s;
  opacity: 0;

}

.img-item .el-image .imageslot{
  background-color:#f5f7fa;
  width:100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content:center;
}

.img-item .upload-demo:hover {
  border-color: #409EFF;
}

.img-item .upload-demo {
  transition: all 0.5s;
  width: 100%;
  height: calc( 100% - 25px);
  box-sizing: border-box;
  padding: 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c0ccda;
}


.pics-area .img-item .img-text {
  text-align: center;
  padding-top: 4px;
  /*padding: 4px;*/
  /*background-color: #f1f1f1;*/
}

.pics-area .img-item:hover .img-close-btn {
  /*display: flex;*/
  opacity: 1;
}

.pics-area .img-item .img-close-btn {
  opacity: 0;
  transition: all 0.9s;
  position: absolute;
  right: 1px;
  top: 4px;
  width: 34px;
  height: 34px;
  background-color: rgba(255,255,255, .6);
  cursor: pointer;
  /*border-radius: 50%;*/
  border-radius: 0px 0px 0px 40px;
  /*for padding left bottom for 不规则border-radius */
  padding-left: 6px;
  padding-bottom: 4px;


  /*border: 1px solid white;*/
  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(0,0,0,0.7);
  font-weight: lighter;
  font-size: 32px;
  line-height: 34px;

}

/*  其他图片 添加按钮 */
.add-btn-area {
  /*background-color: red;*/
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 148px;
  height: 100%;
  /*border-radius: 16px;*/

}

.my-el-form .el-form-item {
  margin-bottom: 0 !important;
}

.other-info-table >>> .el-form-item--feedback {
  width: 100%;
}

.zjhm-width >>> .el-form-item--feedback {
  width: 100%;
}


/* 图片放大预览区 */
.img-preview-my-mask{
  z-index: 11;
  position:absolute;
  width: 100vw;
  height: 100vh;
  background-color:rgba(0,0,0,.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-preview-wrap{
  /*width: 1400px;*/
  /*height: 800px;*/
  background-color:white;
  border-radius: 4px;
}
.img-preview-wrap .preview-title{
  font-weight: 900;
  padding: 0 20px 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.img-preview-wrap .img-preview-div{
  height: 800px;
  /*background-color: red;*/
  border-radius: 0px;
  padding: 10px 20px;
  box-sizing:border-box;

}
.img-preview-wrap .img-preview-div .img-preview{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: contain;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1);
  /*background-color: rgba(0,0,0,0.9)*/
}

/**/
.animationborder{
  /*border: 1px solid red;*/
  animation: flashborder 2s infinite;
  animation-direction: alternate;
}

@keyframes flashborder {
  from{
    border-color: #f7f7f7;
    border-radius: 0px;
  }
  to{
    border-color: red;
    border-radius: 6px;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);

  }
}

</style>
